<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>注册界面</title>
    
    <meta charset="utf-8"/>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<script type="text/javascript" src="./gold/js/My97DatePicker/WdatePicker.js"></script>
	
	<link rel="stylesheet" href="gold/css/jq22.css">
	<link rel="stylesheet" href="gold/css/bootstrap.min.css">
	<link rel="stylesheet" href="gold/css/bootstrap.css">
	<script src="gold/js/jquery-1.7.2.min.js"></script>
	<style type="text/css">
		.red{
			color:red;
		}
		.green{
			color:green;
		}
		#login{
			height:0px;
		}
		.zhong{
			text-align: center;
		}
		#msg{
			color: red;
			text-align: center;
		}
	</style>

  </head>
  
  <body>
    <div id="login">
	    <div class="wrapper">
	        <div class="login">
	            <form action="userRegister.do" method="post" class="container offset1 loginform" >
	                <div id="owl-login">
	                    <div class="hand"></div>
	                    <div class="hand hand-r"></div>
	                    <div class="arms">
	                        <div class="arm"></div>
	                        <div class="arm arm-r"></div>
	                    </div>
	                </div>
	                <div class="pad">
	                    <div class="control-group">
	                        <div class="controls text-center">
	                            <h4>游币用户注册</h4>
	                        </div>
	                    </div>
	                    <div class="control-group" id="msg">
	                        &nbsp;
	                    </div>
	                    
	                    <div class="control-group">
	                        <div class="controls">
	                            <label for="userName" id="userNameMsg" class="glyphicon glyphicon-user"></label>
	                            <input id="userName" type="text" name="userName"  placeholder="姓名(超过两个字符)" autofocus="autofocus" required="required" tabindex="1"  class="form-control input-medium">
	                        </div>
	                    </div>
	                    <div class="control-group">
	                        <div class="controls">
	                            <label for="userPwd"  id="userPwdMsg" class="glyphicon glyphicon-th"></label>
	                            <input id="userPwd" type="password" name="userPwd" placeholder="密码(4-16个字符)" required="required" tabindex="2" class="form-control input-medium">
	                        </div>
	                    </div>
	                    <div class="control-group">
	                        <div class="controls">
	                            <label for="userPwd2" id="userPwdMsg2"  class="glyphicon glyphicon-th"></label>
	                            <input id="userPwd2" name="userPwd2" type="password"  placeholder="确认密码" required="required" tabindex="3" class="form-control input-medium">
	                        </div>
	                    </div>
	                     
	                    <div class="control-group">
	                        <div class="controls">
	                            <label for="userPhone"  class="glyphicon glyphicon-user"></label>
	                            <input id="userPhone" name="userPhone" type="text" placeholder="手机号码 " required="required"  tabindex="4"  class="form-control input-medium">
	                        </div>
	                    </div>
			    <div class="control-group zhong">
	                        <div class="controls">
	                            <input type="radio" name="userSex" value="男"  tabindex="5" checked="checked"/>&nbsp;男
	                            <input type="radio" name="userSex" value="女"  tabindex="6"/>&nbsp;女
	                        </div>
	                    </div>
			    <div class="control-group">
	                        <div class="controls">
	                            <label for="userBirthday" id="birthdayMsg" class="glyphicon glyphicon-user"></label>
	                            <input type="text"  placeholder="生日 " readonly="readonly"
	                            onclick="WdatePicker()" name="userBirthday"
	                            required="required"  tabindex="7"  class="form-control input-medium">
	                        </div>
	                    </div>
	                </div>
	                <div class="form-actions">
	                    <a href="#" tabindex="9" class="btn btn-link text-muted " style="color:red" onclick="goBack()" id="back">返回登录</a>
	                    <button type="submit" tabindex="8" class="btn btn-primary">点击注册</button>
	                </div>
	            </form>
	        </div>
	    </div>
    </div>
    
	<script type="text/javascript" src="gold/js/canvas-particle3.js"></script>
	<script type="text/javascript" src="gold/js/jquery.min.js"></script>
    <script type="text/javascript" >
	    $(function() {
	
	        $('#login #userPwd,#login #userPwd2').focus(function() {
	            $('#owl-login').addClass('password');
	        }).blur(function() {
	            $('#owl-login').removeClass('password');
	        });
	        var config = {
					vx: 4,
					vy:  4,
					height: 2,
					width: 2,
					count: 300,
					color: "220, 220, 220",
					stroke: "139, 137, 137",
					dist: 6000,
					e_dist: 50000,
					max_conn: 10
				};
				CanvasParticle3(config);
	         
	    });
    </script>
    
    <script type="text/javascript">
    	var v1 = false;
    	var v2 = false;
    	var v3 = false;
    	var v4 = false;
    	
    	$("#userName").focusout(function(){
    		v1 = false;
    		var userName = $(this).val();
    		if(userName.length<2){
    			$("#msg").text("用户名长度必须大于2");
    		}else{
	    		$.ajax({
	    			url:"checkUserRegisterName.do",
	    			type:"post",
	    			data:{"userName":userName},
	    			dataType:"json",
	    			success:function(result){
	    				if(result.check==false){
	    					$("#msg").text(result.msg);
	    				}else{
	    					$("#msg").text("");
	    					v1 = true;
	    				}
	    			}
	    		});
    		}
    		
    	});
    	
    	$("#userPwd").focusout(function(){
    		v2 = false;
    		var userPwd = $(this).val();
    		if(userPwd.length<4){
    			$("#msg").text("密码长度必须大于4");
    		}else if(userPwd.length>16){
    			$("#msg").text("密码长度必须小于16");
    		}else{
    			$("#msg").text("");
    			v2 = true;
    		}
    		
    		
    	});
    	
    	$("#userPwd2").focusout(function(){
    		v3 = false;
    		var userPwd = $("#userPwd").val();
    		var userPwd2 = $(this).val();
    		if(userPwd === userPwd2){
    			$("#msg").text("");
    			v3 = true;
    		}else{
    			$("#msg").text("两次输入的密码不一致");
    		}
    	});
    	
    	$("#userPhone").focusout(function(){
    		v4 = false;
    		var userPhone = $("#userPhone").val();
    		var res = checkPhone(userPhone);
    		if(res){
    			$("#msg").text("");
    			v4 = true;
    		}else{
  				$("#msg").text("请输入正确的手机号");
    		}
    		
    	});
    	
    	$("form").submit(function(){
    		return v1&&v2&&v3&&v4;
    	});
    	
    	function checkPhone(phone){
    		var re = /^(1|2)[0-9]{10}$/;
    		var res = re.test(phone);
    		return res;
    	}
    	
    	
    </script>
    
    <script type="text/javascript">
	  	function goBack(){
	  		$("#back").attr("href","gold/user/login.jsp");
	  	}
  </script>
  </body>
  	
</html>
